<template>
  <Card :bordered="false">
    <p slot="title">
      <Icon type="ios-paper"></Icon>
      推送记录
    </p>
    <div style="padding-bottom: 10px;">
    <Row :gutter="16">
      <Col span="4">
        <Cascader :data="selec_env_men"  @on-change=ListNameData trigger="hover"></Cascader>
      </Col>
      <Col span="6">
        <Select v-model="model_name" clearable @on-change="handHistoryPushList" ref="store">
          <Option v-for="item in nameList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </Col>
    </Row>
  </div>
  <div>
    <Table :border=false :columns="columns" :data="data">
      <template slot-scope="{ row, index }" slot="index">
        <span>{{index+1}}</span>
      </template>
      <template slot-scope="{ row, index }" slot="status">
        <span style="color:#ed4014" v-if="`${ row.status }`=='false'">推送失败</span>
        <span style="color:#19be6b" v-if="`${ row.status }`=='true'">推送成功</span>
      </template>
    </Table>
    <div style="padding-top: 10px;" v-if="count">
      <template>
        <Page :total="count" show-total current.sync="current" show-elevator  @on-change="switchPage" />
      </template>
    </div>
  </div>
</Card>
</template>
<script>
import { projectList } from '@/api/deploy'
import { historyPushRecord } from '@/api/images'
import { deployConfTypeDetail, deployConfEnvsDetail } from '@/api/deploy'
  export default {
    data () {
      return {
        appType: '',
        model_name: '',
        nameList: [],
        selec_env_men: [],
        data: [],
        count: null,
        env_names: [],
        language_types: [],
        remote_env: '',
        columns: [
          {
            title: '序号',
            slot: 'index',
            width: '60',
            align: 'center'
          },
          {
            title: '名称',
            key: 'name',
            align: 'center'
          },
          {
            title: '项目类型',
            key: 'application_type',
            align: 'center'
          },
          {
            title: '标签',
            key: 'tag',
            align: 'center'
          },
          {
            title: '远程环境',
            key: 'push_env',
            align: 'center'
          },
          {
            title: '操作用户',
            key: 'push_user',
            align: 'center'
          },
          {
            title: '推送状态',
            key: 'status',
            slot: 'status',
            align: 'center'
          },
          {
            title: '推送日期',
            key: 'push_time',
            align: 'center'
          }
        ]
      }
    },
    mounted () {
      this.mens()
    },
    methods: {
    // 应用发布菜单
      mens () {
        // 获取所有环境名称
        deployConfEnvsDetail().then(res => {
          var envs_data = res.data.results
          for (var service_type in envs_data) {
            if (envs_data[service_type].name != 'dev' && envs_data[service_type].name != 'test') {
              this.env_names.push({'value':envs_data[service_type].name,'label':envs_data[service_type].label})
            }
          }
          // 获取所有开发语言类
          deployConfTypeDetail().then(res => {
            var types_data = res.data.results
            for (var language_type in types_data) {
              this.language_types.push({'value':types_data[language_type].name,'label':types_data[language_type].name})
            }
            // 生产select格式数据
            for (var env in this.env_names) {
              var params = {
                value: this.env_names[env].value,
                label: this.env_names[env].label,
                children: this.language_types
              }
              this.selec_env_men.push(params)
            }
          })
        })
      },
      // 获取所有项目名称
      ListNameData (data) {
        this.nameList = []  //清空历史数据
        this.$refs.store.clearSingleSelect()  //清空select,配合clearable使用
        this.env = 'test'
        this.remote_env = data[0]
        this.appType = data[1]
        projectList(this.env, this.appType).then(res => {
          for(var i in res.data) {
            var params = {}
            params['value'] = res.data[i].name
            params['label'] = res.data[i].name
            this.nameList.push(params)
          }
        })
      },
      // 获取页码并发起请求
      switchPage (page) {
        historyPushRecord (page,this.appType,this.remote_env,this.model_name).then(res => {
          this.count = res.data.count
          this.data = res.data.results
        }).catch(err => {
          this.$Message.error("接口请求失败!")
        })
      },
      // 获取推送记录
      handHistoryPushList () {
        historyPushRecord (1,this.appType,this.remote_env,this.model_name).then(res => {
          this.count = res.data.count
          this.data = res.data.results
        }).catch(err => {
          this.$Message.error("接口请求失败!")
        })
      },
    }
  }
</script>